/** * @description: 公共select下拉 */
<template>
  <div>
    <div class="custom-field-wrapper">
      <van-field
        class="custom-field"
        v-model="value"
        readonly
        clickable
        name="picker"
        v-bind="$attrs"
        :placeholder="placeholder"
        @click="showPicker = true"
      />
      <van-icon name="arrow-down" size="14" />
    </div>

    <van-popup v-model="showPicker" :overlay="overlay" :position="position">
      <van-picker show-toolbar :columns="columns" @confirm="handleConfirmSelect" @cancel="showPicker = false" />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Select',
  model: {
    prop: 'selectValue',
  },
  props: {
    label: {
      type: String,
      default: '选择器',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    columns: {
      type: Array,
      default: () => [],
    },
    overlay: {
      type: Boolean,
      default: true,
    },
    position: {
      type: String,
      default: 'bottom',
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: false,
    },
    selectValue: {
      type: String,
    },
    type: {
      type: String,
    },
  },
  data() {
    return {
      value: this.selectValue,
      showPicker: false,
    }
  },
  watch: {
    selectValue: function(newVal) {
      this.value = newVal
    },
    value(newVal) {
      this.$emit('input', newVal)
    },
  },
  methods: {
    handleConfirmSelect(value) {
      this.value = value
      this.showPicker = false
      this.$emit('selectConfirm', value, this.type)
    },
  },
}
</script>

<style lang="scss" scoped>
.custom-field-wrapper {
  position: relative;
  .custom-field {
    height: 36px;
    line-height: 36px;
    background: #f6f6f6;

    border-radius: 20px;
    outline: none;
    border: none;
    width: 100%;
    font-size: $fz14;
    padding: 0 20px;
  }
  .van-icon {
    position: absolute;
    top: 13px;
    right: 20px;
  }
}
</style>
